<template>
  <div class="app-container">
    <h3>会员管理</h3>
    <div v-if="setPermissionBtn('/findMemberList', searchBtn)" class="inputBox">
      <el-input v-model="search.orderNumbers" class="input" placeholder="请输入单号查询" />
      <el-select v-if="momList.length > 0" v-model="search.level" class="teacherStatus" placeholder="请选择会员等级">
        <el-option v-for="item in momList" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <el-input v-model="search.name" class="input" placeholder="请输入入会人查询" />
      <el-input v-model="search.phone" class="input" placeholder="请输入入会人手机号查询" />

      <el-date-picker
        v-model="search.startTime"
        class="startDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择开始日期"/>
      <el-date-picker
        v-model="search.endTime"
        class="endDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择结束日期"/>
      <el-input v-model="search.saleName" class="input" placeholder="请输地推人员查询" />
      <el-input v-model="search.directPushUser" class="input" placeholder="请输直推人员查询" />
      <el-button type="primary" class="ml10" @click="toSearch">{{ searchBtn.btnName }}</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <template slot="empty">
        <div class="noData">暂无数据</div>
      </template>
      <el-table-column align="center" label="单号" width="120">
        <template slot-scope="scope">
          {{ scope.row.orderNumbers }}
        </template>
      </el-table-column>
      <el-table-column label="会员等级" width="100">
        <template slot-scope="scope">
          {{ scope.row.level | levelStr }}
        </template>
      </el-table-column>
      <el-table-column label="入会人">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="入会人手机号" width="110">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="入会时间" width="160">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="地推人员">
        <template slot-scope="scope">
          {{ scope.row.saleName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="直推人员">
        <template slot-scope="scope">
          {{ scope.row.directPushUser || '-' }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="数量" width="80">
        <template>
          {{ 1 }}
        </template>
      </el-table-column> -->
      <el-table-column label="金额">
        <template slot-scope="scope">
          {{ scope.row.price }} 元
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="140">
        <template slot-scope="scope">
          <el-button
            v-if="setPermissionBtn('/vipUser/info', scope.row)"
            size="mini"
            value="查看详情"
            type="success"
            @click="detail(scope.$index)">{{ scope.row.btnName }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="!listLoading && list.length" class="totalDiv">
      合计&nbsp;&nbsp;&nbsp; <span class="txt">数量:</span><span class="blue">{{ priceData.quantity }}</span> &nbsp; <span class="txt">金额:</span><span class="blue">{{ priceData.amountMoney }} </span><span class="txt">元</span>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <detail :detialvisible.sync="dialogTableVisible" :dialogdata.sync="list" :myindex.sync="detailIndex" :detail-mode="'menberManage'" />
    <!-- <remark :remark-list="remarkList" :remark-visible.sync="remarkVisible" :remark-index="remarkIndex" /> -->
    <!-- <remarkPropt
      ref="remarke"
      :remark-propt-list="remarkProptList"
      :remark-propt-visible.sync="remarkProptVisible"
      :remark-propt-index="remarkProptIndex"
      :cash-type="cashType"
      @remarkText="remarkText" /> -->
  </div>
</template>

<script>
import { teacherCashRecordUpdate, checkRemark, teacherCashRecord, getUserMessage } from '@/api/financial'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import detail from '@/components/detail'
import remark from '@/components/remark'
import remarkPropt from '@/components/remark/remarkPrompt'
import { getByteLength } from '@/utils/validate'
import { checkNotEmail, checkNum } from '@/utils/validateUtil';
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'
import { findMemberList } from '@/api/user'

import { vipInfoAll } from '@/api/product'
const inputValidatorNum = (v) => {
  console.log(getByteLength(v))
  if (getByteLength(v) > 600) {
    return false
  }
}

export default {
  components: { Pagination, detail, remark, remarkPropt },
  filters: {
    // 会员等级过滤
    levelStr(level) {
      const levelMap = {
        1: '泰山美妈',
        2: '泰山美妈团',
        3: '泰山美妈社',
        4: '泰山美妈会'
      }
      return levelMap[level]
    }
  },
  data() {
    return {
      searchBtn: {},
      momList: [],
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      search: {
        orderNumbers: '',
        level: '',
        name: '',
        phone: '',
        startTime: '',
        endTime: '',
        saleName: '',
        directPushUser: ''
      },
      priceData: {
        quantity: '',
        amountMoney: ''
      },
      isShowDel: false,
      temp: {
        status: ''
      },
      dialogTableVisible: false,
      detailList: [],
      formLabelWidth: '120px',
      detailIndex: -1
    //   remarkVisible: false,
    //   remarkList: [],
    //   remarkIndex: -1,
    //   cashType: 1,
    //   remarkProptVisible: false,
    //   remarkProptList: [],
    //   remarkProptIndex: -1,
    //   permissionShow: false, // 权限数据未到达之前按钮隐藏
    //   permissionList: [] // 权限数据列表
    }
  },
  computed: {
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
    // 'permissionList'(newVal) {
    //   this.permissionList = newVal
    //   this.permissionShow = true
    // }
  },
  created() {
    // this.getPermissonFn()

    // 获取会员信息
    this.getMomList()
  },
  mounted() {
    this.fetchData()
    this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  methods: {
    // 权限数据的获取
    // getPermissonFn() {
    //   const id = getLocalId()
    //   const uid = getLocalUid()
    //   const data = { uid }
    //   getPermission(id, data).then(res => {
    //     console.log('权限结果', res)
    //     if (res.code === '200') {
    //       this.permissionList = res.data
    //       // console.log('权限名称：', this.getPermissionName(this.permissionList))
    //     } else {
    //       Message.error(res.message + '-' + res.data)
    //     }
    //   })
    // },
    getMomList() {
      vipInfoAll().then(res => {
        if (res.code === '200') {
          this.momList = res.data
          console.log('momList', this.momList)
        } else {
          Message.error(res.message)
        }
      })
    },
    remarkText(value) {
      this.fetchData()
    },
    // 查询
    toSearch() {
      if (this.search.startTime && this.search.endTime) {
        const start = new Date(this.search.startTime).getTime();
        const end = new Date(this.search.endTime).getTime();
        if (start > end) {
          Message.error('结束时间必须大于开始时间')
          return false
        }
      }
      if (this.search.startTime && this.search.startTime.indexOf(' 00:00:00') === -1) this.search.startTime += ' 00:00:00'
      if (this.search.endTime && this.search.endTime.indexOf(' 23:59:59') === -1) this.search.endTime += ' 23:59:59'
      this.listLoading = true
      const newData = this.$deleteNull(Object.assign({}, this.listQuery, this.search))
      // console.log('查询', newData)
      findMemberList(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.pageInfo.list
          this.total = response.data.pageInfo.total
          this.priceData.quantity = response.data.quantity
          this.priceData.amountMoney = response.data.amountMoney
        } else {
          Message.error(response.message + '-' + response.data)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 重置
    toReset() {
      this.search.orderNumbers = ''
      this.search.level = ''
      this.search.name = ''
      this.search.phone = ''
      this.search.startTime = ''
      this.search.endTime = ''
      this.search.saleName = ''
      this.search.directPushUser = ''
    },
    fetchData() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      // const newData = this.objectCon(this.listQuery, this.search)
      // const newData = this.objectCon(this.listQuery, this.search)
      console.log('会员管理传参:', newData)
      findMemberList(newData).then(response => {
        console.log('会员管理response:::', response)
        if (response.code === '200') {
          this.list = response.data.pageInfo.list
          // this.list[4].status = 0
          this.total = response.data.pageInfo.total
          this.priceData.quantity = response.data.quantity
          this.priceData.amountMoney = response.data.amountMoney
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          Message.error(response.message + '-' + response.data)
        }
      })
    //   this.listLoading = true
    //   const newData = this.objectCon(this.listQuery, this.search)
    //   teacherCashRecord(this.cashType, newData).then(response => {
    //     console.log(response)
    //     this.list = response.data.list
    //     console.log(response.data.list)
    //     // this.list[4].status = 0
    //     this.total = response.data.total
    //     setTimeout(() => {
    //       this.listLoading = false
    //     }, 1.5 * 1000)
    //   })
    },
    // 查看备注
    // checkRemark(id, index) {
    //   checkRemark(id).then(res => {
    //     if (res.code === '200') {
    //       this.remarkList = res.data
    //       if (this.remarkList.length) {
    //         this.remarkVisible = true
    //         this.remarkIndex = index
    //       } else {
    //         this.$message('暂无备注');
    //       }
    //     }
    //   })
    // }
    // 点击详情
    detail(index) {
      this.detailIndex = index
      this.dialogTableVisible = true
    }
    // addCourse(courseTypeId) {
    //   this.$data.courseTypeId = courseTypeId
    //   this.$data.dialogFormVisible = true
    // },
    // getValue(value) {
    //   this.$data.temp.status = value
    // },
    // getEnable(value) {
    //   this.$data.course.isEnable = value
    // },
    // getChildren(value) {
    //   this.$data.course.courseList = value
    // },
    // addCourseType() {
    //   this.$router.push({
    //     path: 'add',
    //     query: { isEdit: false }
    //   })
    // },
    // editRow(pid) {
    //   const _this = this;
    //   const object = Object.assign({ isEdit: true }, _this.$data.list[pid])
    //   this.$router.push({
    //     path: 'add',
    //     query: object
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.totalDiv{
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 1px solid #eee;
    border-top: none;
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
    .txt{
        color: #999;
    }

    .red {
        color: #a60807;
        margin-left: 10px;
    }
    .blue {
        color: #09c;
        margin-left: 4px;
    }
}
  .el-icon-remove {
    margin-left: 10px;
  }
  .img_url {
    width: 110px;
    height: 110px;
  }
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 160px;}
    .input:nth-of-type(2){ width: 140px;}
    .input:nth-of-type(3){ width: 160px;}
    .input:nth-of-type(4){ width: 190px;}
    .input:nth-of-type(7){ width: 150px;}
    .input:nth-of-type(8){ width: 150px;}
    .teacherType { width: 150px;}
    .teacherSex { width: 120px;}
    .startDate { width: 150px;}
    .endDate { width: 150px;}
    .teacherStatus { width: 150px;}
  }
</style>
